
深色版本
<template>
  <div class="recipe-detail">
    <div class="recipe-header">
      <div class="recipe-title">
        <h1>{{ detail.title }}</h1>
      </div>
      <button @click="toggleFavorite" class="favorite-button">
        <i :class="isFavorited ? 'fas fa-heart' : 'far fa-heart'" aria-hidden="true"></i>
        {{ isFavorited ? '已收藏' : '收藏' }}
      </button>
    </div>
    <div class="recipe-image">
      <img :src="detail.image_url" alt="Recipe Image" class="image">
    </div>
    <div class="recipe-description">
      <p>{{ detail.description }}</p>
      <div class="author-info">
        发布者: {{ detail.User?.user_name || '未知' }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, watchEffect } from 'vue';
import axios from 'axios';
import { notification } from 'ant-design-vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const detail = ref({});
const isFavorited = ref(false); // 控制收藏状态

// 获取食谱详情
const fetchDetail = async (recipeId) => {
  const token = localStorage.getItem('Token');
  const config = {
    headers: {
      'Token': token
    }
  };
  try {
    const response = await axios.get(`/recipe?recipeId=${recipeId}`, config);
    if (response.data.code === 0) {
      detail.value = response.data.data;
      console.log("detail.value", detail.value);
      checkIfFavorited(recipeId); // 检查是否已经收藏
    } else {
      notification.error({ description: response.data.message });
    }
  } catch (error) {
    notification.error({ description: '没有得到数据' + error });
  }
};

// 切换收藏状态
const toggleFavorite = async () => {
  const token = localStorage.getItem('Token');
  const config = {
    headers: {
      'Token': token
    }
  };
  try {
    if (!isFavorited.value) {
      // 添加收藏
      await axios.post('/favorite', { recipe_id: detail.value.recipe_id }, config);
      isFavorited.value = true;
      notification.success({ message: '已收藏' });
    } else {
      // 取消收藏
      await axios.delete(`/favorite/${detail.value.recipe_id}`, config);
      isFavorited.value = false;
      notification.success({ message: '已取消收藏' });
    }
    // 重新检查收藏状态
    checkIfFavorited(detail.value.recipe_id);
  } catch (error) {
    notification.error({ description: '收藏失败，请稍后再试' });
  }
};

// 检查是否已收藏
const checkIfFavorited = async (recipeId) => {
  const token = localStorage.getItem('Token');
  const config = {
    headers: {
      'Token': token
    }
  };
  try {
    const response = await axios.get(`/favorite?recipeId=${recipeId}`, config);
    isFavorited.value = response.data.message; // 更新收藏状态
    console.log("response:", response.data);
  } catch (error) {
    console.error(error);
  }
};

onBeforeMount(() => {
  if (route.params.recipeId) {
    fetchDetail(route.params.recipeId);
  }
});

watchEffect(() => {
  if (route.params.recipeId) {
    fetchDetail(route.params.recipeId);
  }
});
</script>
<style scoped>
.recipe-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.recipe-header {
  margin-bottom: 20px;
}

.recipe-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 10px;
}

.recipe-image {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  margin-top: 20px;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
}

.image {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.recipe-description {
  text-align: left;
  margin-top: 20px;
}

.recipe-description p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #555;
}

.author-info {
  font-style: italic;
  margin-top: 10px;
  color: #777;
}

.recipe-image:hover .image {
  transform: scale(1.1);
}
.favorite-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.5em;
  color: #f44336;
  margin-top: 10px;
}

.favorite-button i {
  transition: color 0.3s ease-in-out;
}

.is-favorited .favorite-button i {
  color: #e91e63;
}
</style>